<template>
  <div class="game-comments-item">
    <div class="user-bar">
      <div class="avatar">
        <van-image round width="35" cover height="35" :src="commentData.avatarUrl" />
      </div>
      <div class="user-info">
        <div class="row-1">{{ commentData.userName }}</div>
        <div class="row-2">
          <van-icon name="star" v-for="stars in commentData.stars" :color="starsColor" />
        </div>
      </div>
      <div class="award">
        <van-icon size="16px" name="good-job" color="#dcdee0" />
        <span>{{ commentData.award }}</span>
      </div>
    </div>
    <div class="comments-content" :class="{ 'limit': isLimit }">
      <div v-html="commentData.content"></div>
    </div>
    <div class="tools">
      <p>{{ commentData.time }}</p>
      <p class="btn-all" v-if="isLimit" @click="openClick">展开</p>
      <p class="btn-all" v-if="!isLimit" @click="closeClick">收起</p>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, computed } from 'vue';

const props = defineProps({
  commentData: Object
});

const starsColor = computed(() => {
  let num = props.commentData.stars
  if (num === 5) {
    return '#f58045'
  } else if (num === 4) {
    return '#cb33ff'
  } else if (num === 3) {
    return '#1a91fe'
  } else if (num === 2 || num === 1) {
    return '#59d01b'
  }
})

let isLimit = ref(true)
const openClick = () => {
  isLimit.value = false
}
const closeClick = () => {
  isLimit.value = true
}
</script>

<style scoped>
.game-comments-item {
  padding: 12px;
  font-size: 0;
}

/* 用户栏 */
.user-bar {
  display: flex;
}

.user-bar .user-info {
  margin-left: 10px;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
}

.user-bar .user-info .row-1 {
  font-size: 15px;
  color: #323233;
}

.user-bar .user-info .row-2 {
  font-size: 10px;
  color: #ffd21e;
}

.user-bar .user-info .row-2 i {
  margin-right: 3px;
}

.user-bar .award span {
  margin-left: 4px;
  font-size: 14px;
  color: #c8c9cc;
}

/* 评论内容 */
.comments-content {
  margin-top: 10px;
  font-size: 15px;
  line-height: 21px;
  color: #323233;
}

.limit {
  /* 文字行高的5倍 */
  max-height: 105px;
  overflow: hidden;
}

/* 工具栏 */
.tools {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tools p {
  font-size: 12px;
  line-height: 16px;
  color: #969799;
}

.tools .btn-all {
  font-size: 14px;
  line-height: 20px;
  color: #006ef4;
}
</style>
